import React from 'react';
import {View, StyleSheet, Dimensions, Image} from 'react-native';
import {getSwiperImgs} from '@/api/index';
import Swiper from 'react-native-swiper';

const {width} = Dimensions.get('window');
const styles = StyleSheet.create({
  wrapper: {
    width: width,
    height: (width * 40) / 75,
  },
  paginationStyle: {
    bottom: 6,
  },
  dotStyle: {
    backgroundColor: '#fff',
    opacity: 0.4,
  },
  activeDotStyle: {
    backgroundColor: '#f00',
  },
  bannerImg: {
    width: width,
    height: (width * 40) / 75,
  },
});

class Swiper1 extends React.Component {
  state = {
    imgUrls: [],
    count: 0,
  };
  componentDidMount() {
    getSwiperImgs().then(res => {
      let arr: any[] = [];
      res.data.forEach((i: any) => arr.push(i));
      this.setState({imgUrls: arr});
    });
  }

  render() {
    const {imgUrls} = this.state;
    return (
      <View style={styles.wrapper}>
        <Swiper
          height={200} // 指定高度
          loop={true} // 是否开启循环
          showsButtons={true} // 设置控制按钮(左右两侧的箭头)是否可见
          index={0}
          autoplay={false} // 是否自动跳转
          horizontal={true} // 是否水平滚动
          loadMinimalSize={1}
          removeClippedSubviews={false}>
          {imgUrls.map((i, index) => (
            <Image
              key={index}
              resizeMode="cover"
              source={{
                uri: i,
              }}
              style={styles.bannerImg}
            />
          ))}
        </Swiper>
      </View>
    );
  }
}

export default Swiper1;
